<template>
    <art-table class="table" :data="tableData" :pagination="false" size="large" :border="false" :stripe="false"
        :show-header-background="false" :height="500" :currentPage="pageNum" :pageSize="pageSize" :total="pageTotal"
        @current-change="currentChange" @size-change="sizeChange">
        <template #default>
            <el-table-column label="考试时间" prop="startTime" align="center" />
            <el-table-column label="学员信息" align="center" #default="scope">
                <div class="flex">
                    <img :src="scope.row.avatar" alt="" class="avatarImg">
                    <div class="info">
                        <div>{{ scope.row.nickName }}</div>
                        <div>{{ scope.row.mobile }}</div>
                    </div>
                </div>
            </el-table-column>
            <el-table-column label="考试科目" prop="categoryId" align="center" #default="scope">
                {{ categoryList[scope.row.categoryId] }}
            </el-table-column>
            <el-table-column label="车型" prop="carModelId" align="center" #default="scope">
                {{ carTypeList[scope.row.carModelId] }}
            </el-table-column>
            <el-table-column label="试卷类型" align="center">
                模拟考试
            </el-table-column>
            <el-table-column label="考试分数" prop="score" align="center" />
            <el-table-column label="答对题目数" prop="correctQuestions" align="center" />
            <el-table-column label="答错题目数" prop="saleAmount" align="center" #default="scope">
                {{ scope.row.totalQuestions - scope.row.correctQuestions }}
            </el-table-column>
            <el-table-column label="答题用时（秒）" prop="duration" align="center" />
        </template>
    </art-table>
</template>
<script lang="ts" setup>
import { getExamRecordInfo } from '@/api/questionbank'

const tableData = ref([])

const carTypeList = ref<any>({
    '1': '小车（C1,C2,C3）',
    '2': '货车（A2,B2）',
    '3': '客车（A1,A3,B1）',
    '5': '轻型牵引挂车（C6）',
    '8': '摩托车（D,E,F）'
})
const categoryList = ref<any>({
    1: '科目一',
    2: '科目二',
    3: '科目三',
    4: '科目四',
    5: '注销恢复',
    6: '满分学习',
    7: '三力测试'
})

const pageNum = ref(1)
const pageSize = ref(10)
const pageTotal = ref(0)
const currentChange = (val: number) => {
    pageNum.value = val
    getData()
}

const sizeChange = (val: number) => {
    pageSize.value = val
    pageNum.value = 1
    getData()
}
const getData = async () => {
    const res = await getExamRecordInfo({ pageNum: pageNum.value, pageSize: pageSize.value })
    if (res.code === '00000') {
        tableData.value = res.data.list
    }
}
onMounted(() => {
    getData()
})
</script>
<style lang="scss" scoped>
.avatarImg {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.flex {
    display: flex;
    justify-content: center;
}

.info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
}
</style>